<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单页面模板</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="Jiapeng Cai" />
<link rel="stylesheet" href="/plugins/layui/css/layui.css" />
<link rel="stylesheet" href="/plugins/iconfont/iconfont.css" />
<style>
.loginBody .title{font-size: 26px;color:#636363;text-align: center;padding:40px 0}
.loginBody form.layui-form{ padding:0 20px; width:340px; height:435px; margin:120px auto}
.loginBody .bg{position: absolute;top: 0px;bottom: 0px;background-color:#eeeeee;background-size: cover;overflow: hidden;width: 100%;}
.loginBody .layui-form-item{ position:relative;}
.loginBody .layui-form-item label,.loginBody .layui-form-item input,.loginBody .layui-form-item button{height:40px;line-height: 40px}
.loginBody .layui-form-item label{ position:absolute; color:#757575;;text-align: center;width:34px}
.loginBody .captcha-item img{max-height: 38px;margin-left: 30px;cursor: pointer;}
.loginBody input{padding-left:30px}
#imgCode img{ position:absolute; top:1px; right:1px; cursor:pointer;height:48px}
.loginBody .login-btn{width: 100%}
</style>
</head>
<body>
	<div class="loginBody" style="display: none">
		<div class="bg"></div>
		<form class="layui-form">
			<div class="layui-form-item input-item" >
				<div class="title">单页面模板登录</div>
			</div>
			<div class="layui-form-item input-item" >
				<label for="userName"><i class="iconfont icon-user"></i></label>
				<input type="text" placeholder="请输入用户名:test" autocomplete="off" name="username"  class="layui-input" lay-verify="required">
			</div>
			<div class="layui-form-item input-item">
				<label for="password"><i class="iconfont icon-password"></i></label>
				<input type="password" placeholder="请输入密码:test" autocomplete="off" name="password" class="layui-input" lay-verify="pwd">
			</div>
			<div class="layui-form-item input-item captcha-item">
				<div class="layui-col-xs7">
					<label for="password"><i class="iconfont">&#xe618;</i></label>
					<input type="text" placeholder="请输入右侧验证码" autocomplete="off" name="captcha" class="layui-input" lay-verify="captcha">
				</div>
				<div class="layui-col-xs5">
					<img src="/captcha" class="captcha" id="captcha"/>
				</div>
			</div>
			<div class="layui-form-item input-item" >
				<input type="checkbox"  lay-filter="remember" lay-skin="primary" title="记住密码">
			</div>
			<div class="layui-form-item">
				<button class="layui-btn login-btn" lay-filter="login" lay-submit="">登录</button>
			</div>
		</form>
	</div>
	
</body>
<script src="/plugins/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
	base : '/res/js/'
}).extend({
	ajax : 'lib/ajax.js?v=1',
	msg : 'lib/msg',
	utils : 'lib/utils',
	conf : 'config',
	
}).use(['form','layer','jquery','ajax', 'utils', 'msg'],function(){
	 
    var form = layui.form,
        $ = layui.jquery
        ajax = layui.ajax
        utils = layui.utils;
    
    $(".loginBody").show();
   
    form.verify({
        pwd:[
              /[\S]+/
              ,'请输入密码'
            ],
       	captcha:[
                /[\S]+/
                ,'请输入验证码'
              ]
    });

    var refreshCaptcha = function(){
    	var $this = $("#captcha");
    	var src = $this.attr("src");
    	$this.attr("src", "/captcha?_=" + new Date().getTime());
    }
    
    $("#captcha").click(function(){
    	refreshCaptcha();
    });
    
    form.on('checkbox(remember)', function(obj){
    	layui.layer.tips("记住密码？不存在的", obj.othis);
    	obj.elem.checked = !obj.elem.checked;
    	form.render();
    });
    
    //登录按钮
    form.on("submit(login)",function(data){
        utils.data("login_email", data.field.email);
        $(data.elem).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
        ajax.post("/login", data.field, {
        	showTip : {
        		ok : false
        	},
        	loading:false,
        	ok : function(resp){
        		console.log(resp);
        		ajax.setToken(resp.data.access_token);
        		location.href="/Main";
        	},
        	fail:function(){
        		refreshCaptcha();
        	},
        	always:function(){
        		$(data.elem).text("登录").removeAttr("disabled").removeClass("layui-disabled");
        	}
        	
        })
        return false;
    })
    
    ajax.getToken() && $.ajax({
    	url : "/admin",
    	headers:{"SPT-Token" : ajax.getToken()},
    	success : function(resp){
    		if(resp.code == 0){
    			location.href="/Main";	
    		}
    	}
    });
    	
    

})
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1273734385'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1273734385' type='text/javascript'%3E%3C/script%3E"));</script>
</html>